<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <div id="app">
        <table border="1">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>

            <!-- 数据行 -->
            <tr v-for="(article, index) in articleList" :key="index">
                <td>{{ article.title }}</td>
                <td>{{ article.category}}</td>
                <td>{{ article.time}}</td>
                <td>{{ article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3.4.21/dist/vue.esm-browser.js'
        // 创建实例对象
        createApp({
            data() {
                return {
                    //定义数据
                    articleList: [
                        {
                            title: "医疗反腐绝非砍医护收入",
                            category: "时事",
                            time: "2023-09-5",
                            state: "已发布"
                        },
                        {
                            title: "中国男篮缘何一败涂地？",
                            category: "篮球",
                            time: "2023-09-5",
                            state: "草稿"
                        },
                        {
                            title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                            category: "旅游",
                            time: "2023-09-5",
                            state: "已发布"
                        }
                    ]
                }
            }
        }).mount('#app') // 控制页面元素

    </script>
</body>

</html>